
<!DOCTYPE>
<html>
<head>
<title>Q.images_box | QLib | Powered By Q.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 使用QLib控件是必须包含样式表 -->
<link type="text/css" rel="stylesheet" href="../ui.css" />
<style>
#mycontainer {
  position:relative;
  width: 698px;
  height: 698px;
  background: blue;
  padding: 1px;
}

#box-container {
  position:relative;
  width: 698px;
  height: 298px;
  background: blue;
  padding: 1px;
}


.q-images-box.size_1 .q-box-item {
  width: 100px;
  height: 100px;
}
.q-images-box.size_2 .q-box-item {
  width: 200px;
  height: 200px;
}

.q-images-box.size_3 .q-box-item {
  width: 300px;
  height: 200px;
}

.q-images-box.size_5 .q-box-item {
  width: 500px;
  height: 300px;
}

/* style  for button */
.btn-default .caret{border-top-color:#333333;}
.btn-primary .caret,.btn-success .caret,.btn-warning .caret,.btn-danger .caret,.btn-info .caret{border-top-color:#fff;}
.dropup .btn-default .caret{border-bottom-color:#333333;}
.dropup .btn-primary .caret,.dropup .btn-success .caret,.dropup .btn-warning .caret,.dropup .btn-danger .caret,.dropup .btn-info .caret{border-bottom-color:#fff;}
.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle;}.btn-group>.btn,.btn-group-vertical>.btn{position:relative;float:left;}.btn-group>.btn:hover,.btn-group-vertical>.btn:hover,.btn-group>.btn:focus,.btn-group-vertical>.btn:focus,.btn-group>.btn:active,.btn-group-vertical>.btn:active,.btn-group>.btn.active,.btn-group-vertical>.btn.active{z-index:2;}
.btn-group>.btn:focus,.btn-group-vertical>.btn:focus{outline:none;}
.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px;}
.btn-toolbar:before,.btn-toolbar:after{content:" ";display:table;}
.btn-toolbar:after{clear:both;}
.btn-toolbar:before,.btn-toolbar:after{content:" ";display:table;}
.btn-toolbar:after{clear:both;}
.btn-toolbar .btn-group{float:left;}
.btn-toolbar>.btn+.btn,.btn-toolbar>.btn-group+.btn,.btn-toolbar>.btn+.btn-group,.btn-toolbar>.btn-group+.btn-group{margin-left:5px;}
.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0;}
.btn-group>.btn:first-child{margin-left:0;}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-top-right-radius:0;}
.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;}
.btn-group>.btn-group{float:left;}
.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0;}
.btn-group>.btn-group:first-child>.btn:last-child,.btn-group>.btn-group:first-child>.dropdown-toggle{border-bottom-right-radius:0;border-top-right-radius:0;}
.btn-group>.btn-group:last-child>.btn:first-child{border-bottom-left-radius:0;border-top-left-radius:0;}
.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0;}
.btn-group-xs>.btn{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px;}
.btn-group-sm>.btn{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px;}
.btn-group-lg>.btn{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px;}
.btn-group>.btn+.dropdown-toggle{padding-left:8px;padding-right:8px;}
.btn-group>.btn-lg+.dropdown-toggle{padding-left:12px;padding-right:12px;}
.btn-group.open .dropdown-toggle{-webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);}
.btn .caret{margin-left:0;}
.btn-lg .caret{border-width:5px 5px 0;border-bottom-width:0;}
.dropup .btn-lg .caret{border-width:0 5px 5px;}
.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{display:block;float:none;width:100%;max-width:100%;}
.btn-group-vertical>.btn-group:before,.btn-group-vertical>.btn-group:after{content:" ";display:table;}
.btn-group-vertical>.btn-group:after{clear:both;}
.btn-group-vertical>.btn-group:before,.btn-group-vertical>.btn-group:after{content:" ";display:table;}
.btn-group-vertical>.btn-group:after{clear:both;}
.btn-group-vertical>.btn-group>.btn{float:none;}
.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0;}
.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0;}
.btn-group-vertical>.btn:first-child:not(:last-child){border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0;}
.btn-group-vertical>.btn:last-child:not(:first-child){border-bottom-left-radius:4px;border-top-right-radius:0;border-top-left-radius:0;}
.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0;}
.btn-group-vertical>.btn-group:first-child>.btn:last-child,.btn-group-vertical>.btn-group:first-child>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0;}
.btn-group-vertical>.btn-group:last-child>.btn:first-child{border-top-right-radius:0;border-top-left-radius:0;}
.btn-group-justified{display:table;width:100%;table-layout:fixed;border-collapse:separate;}.btn-group-justified .btn{float:none;display:table-cell;width:1%;}
[data-toggle="buttons"]>.btn>input[type="radio"],[data-toggle="buttons"]>.btn>input[type="checkbox"]{display:none;}
.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:normal;line-height:1.428571429;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;border-radius:4px;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
.btn:hover,.btn:focus{color:#333333;text-decoration:none;}
.btn:active,.btn.active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);}
.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;pointer-events:none;opacity:0.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none;}
.btn-default{color:#333333;background-color:#ffffff;border-color:#cccccc;}.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active,.open .dropdown-toggle.btn-default{color:#333333;background-color:#ebebeb;border-color:#adadad;}
.btn-default:active,.btn-default.active,.open .dropdown-toggle.btn-default{background-image:none;}
.btn-default.disabled,.btn-default[disabled],fieldset[disabled] .btn-default,.btn-default.disabled:hover,.btn-default[disabled]:hover,fieldset[disabled] .btn-default:hover,.btn-default.disabled:focus,.btn-default[disabled]:focus,fieldset[disabled] .btn-default:focus,.btn-default.disabled:active,.btn-default[disabled]:active,fieldset[disabled] .btn-default:active,.btn-default.disabled.active,.btn-default[disabled].active,fieldset[disabled] .btn-default.active{background-color:#ffffff;border-color:#cccccc;}
.btn-primary{color:#ffffff;background-color:#FF8800;border-color:#FF6600;}.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary{color:#ffffff;background-color:#FF8800;border-color:#FF6600;}
.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary{background-image:none;}
.btn-primary.disabled,.btn-primary[disabled],fieldset[disabled] .btn-primary,.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled:active,.btn-primary[disabled]:active,fieldset[disabled] .btn-primary:active,.btn-primary.disabled.active,.btn-primary[disabled].active,fieldset[disabled] .btn-primary.active{background-color:#428bca;border-color:#357ebd;}
.btn-warning{color:#ffffff;background-color:#f0ad4e;border-color:#eea236;}.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active,.open .dropdown-toggle.btn-warning{color:#ffffff;background-color:#ed9c28;border-color:#d58512;}
.btn-warning:active,.btn-warning.active,.open .dropdown-toggle.btn-warning{background-image:none;}
.btn-warning.disabled,.btn-warning[disabled],fieldset[disabled] .btn-warning,.btn-warning.disabled:hover,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning:hover,.btn-warning.disabled:focus,.btn-warning[disabled]:focus,fieldset[disabled] .btn-warning:focus,.btn-warning.disabled:active,.btn-warning[disabled]:active,fieldset[disabled] .btn-warning:active,.btn-warning.disabled.active,.btn-warning[disabled].active,fieldset[disabled] .btn-warning.active{background-color:#f0ad4e;border-color:#eea236;}
.btn-danger{color:#ffffff;background-color:#d9534f;border-color:#d43f3a;}.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active,.open .dropdown-toggle.btn-danger{color:#ffffff;background-color:#d2322d;border-color:#ac2925;}
.btn-danger:active,.btn-danger.active,.open .dropdown-toggle.btn-danger{background-image:none;}
.btn-danger.disabled,.btn-danger[disabled],fieldset[disabled] .btn-danger,.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,fieldset[disabled] .btn-danger:focus,.btn-danger.disabled:active,.btn-danger[disabled]:active,fieldset[disabled] .btn-danger:active,.btn-danger.disabled.active,.btn-danger[disabled].active,fieldset[disabled] .btn-danger.active{background-color:#d9534f;border-color:#d43f3a;}
.btn-success{color:#ffffff;background-color:#5cb85c;border-color:#4cae4c;}.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active,.open .dropdown-toggle.btn-success{color:#ffffff;background-color:#47a447;border-color:#398439;}
.btn-success:active,.btn-success.active,.open .dropdown-toggle.btn-success{background-image:none;}
.btn-success.disabled,.btn-success[disabled],fieldset[disabled] .btn-success,.btn-success.disabled:hover,.btn-success[disabled]:hover,fieldset[disabled] .btn-success:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,fieldset[disabled] .btn-success:focus,.btn-success.disabled:active,.btn-success[disabled]:active,fieldset[disabled] .btn-success:active,.btn-success.disabled.active,.btn-success[disabled].active,fieldset[disabled] .btn-success.active{background-color:#5cb85c;border-color:#4cae4c;}
.btn-info{color:#ffffff;background-color:#5bc0de;border-color:#46b8da;}.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active,.open .dropdown-toggle.btn-info{color:#ffffff;background-color:#39b3d7;border-color:#269abc;}
.btn-info:active,.btn-info.active,.open .dropdown-toggle.btn-info{background-image:none;}
.btn-info.disabled,.btn-info[disabled],fieldset[disabled] .btn-info,.btn-info.disabled:hover,.btn-info[disabled]:hover,fieldset[disabled] .btn-info:hover,.btn-info.disabled:focus,.btn-info[disabled]:focus,fieldset[disabled] .btn-info:focus,.btn-info.disabled:active,.btn-info[disabled]:active,fieldset[disabled] .btn-info:active,.btn-info.disabled.active,.btn-info[disabled].active,fieldset[disabled] .btn-info.active{background-color:#5bc0de;border-color:#46b8da;}
.btn-link{color:#428bca;font-weight:normal;cursor:pointer;border-radius:0;}.btn-link,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;}
.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{border-color:transparent;}
.btn-link:hover,.btn-link:focus{color:#2a6496;text-decoration:underline;background-color:transparent;}
.btn-link[disabled]:hover,fieldset[disabled] .btn-link:hover,.btn-link[disabled]:focus,fieldset[disabled] .btn-link:focus{color:#999999;text-decoration:none;}
.btn-lg{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px;}
.btn-sm,.btn-xs{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px;}
.btn-xs{padding:1px 5px;}
.btn-block{display:block;width:100%;padding-left:0;padding-right:0;}
.btn-block+.btn-block{margin-top:5px;}

</style>
<!--  
提示：src="{QLib目录}/Q.js" 
根据实际存放路径， 测试代码都是在QLib目录的samples文件夹下，所以这里用的是"../Q.js" 
-->
<script type="text/javascript" src="../Q.js">
<!--
// 需要加载额外库时
import utils.stl;
import utils.xml;
import ui.images-box;
-->
</script>

<script>
<!--

var g_images_box;

Q.Ready(function() {

    g_images_box = new Q.images_box({
      container: Q.$('wayixia-list-2'),
      on_item_changed : function(item, checked) {
        if(this.selected != item) {
          if(this.selected)
            this.set_check(this.selected, false);
          this.selected = item;
        }
      },
    });
   
    var images = [
      'http://wayixia.com/uploads/image/64e05114-553c-4b34-97b5-a7f1082e1698.jpg',
      'http://wayixia.com/uploads/image/3c6d55fbb2fb4316adf03a9722a4462308f7d374.jpg',
      'http://wayixia.com/uploads/image/1347287735218.jpg',
      'http://wayixia.com/uploads/image/1372211389301.jpg',
      'http://wayixia.com/uploads/image/134849642946.jpg',
    ]
    var displays = {}
    for(var i=0; i < images.length; i++) {
      var src = images[i];
       displays[src] = src;
    }
    g_images_box.display_images(displays, {})();

    g_images_box.set_style("size_3");
    Q.$('size_1').onclick = function() { g_images_box.set_style('size_1'); }
    Q.$('size_2').onclick = function() { g_images_box.set_style('size_2'); }
    Q.$('size_3').onclick = function() { g_images_box.set_style('size_3'); }
    Q.$('size_5').onclick = function() { g_images_box.set_style('size_5'); }

});

-->
</script>
</head>
<body onselectstart="return false;" style="overflow:hidden;-moz-user-select:none;-webkit-user-select: none;">
<h3>Q.images_box samples </h3>
<hr>
<br>
<br>

<div id="mycontainer">
<div class="q-images-box" id="wayixia-list" style="overflow: always;">
  <div style="position:absolute; height: 60px; left:0; right:0; top: 0;">toolbar</div>

  <div data-url="http://wayixia.com/uploads/image/3c6d55fbb2fb4316adf03a9722a4462308f7d374.jpg" data-width="610" data-height="915" class="q-box-item"><span class="q-box-info">    <span class="wh">610x915<span> </span>    </span> </span>
   <div class="q-box-image"><a href="javscript:void(0);"><img src="http://wayixia.com/uploads/image/3c6d55fbb2fb4316adf03a9722a4462308f7d374.jpg" class="image" style="margin-top: 0px; width: 133.333333333333px; height: 200px;"></a></div><div class="select-mask"></div></div>
 <div data-url="http://wayixia.com/uploads/image/1347287735218.jpg" data-width="1920" data-height="1080" class="q-box-item mouseover mouseselected"><span class="q-box-info">     <span class="wh">1920x1080<span> </span>     </span></span><div class="q-box-image"><a href="javscript:void(0);"><img src="http://wayixia.com/uploads/image/1347287735218.jpg" class="image" style="margin-top: 43.75px; width: 200px; height: 112.5px;"></a></div><div class="select-mask"></div></div>
 <div data-url="http://wayixia.com/uploads/image/134849642946.jpg" data-width="1440" data-height="900" class="q-box-item mouseover mouseselected"><span class="q-box-info">     <span class="wh">1440x900<span> </span>     </span></span><div class="q-box-image"><a href="javscript:void(0);"><img src="http://wayixia.com/uploads/image/134849642946.jpg" class="image" style="margin-top: 37.5px; width: 200px; height: 125px;"></a></div><div class="select-mask"></div></div>
 <div data-url="http://wayixia.com/uploads/image/1372211389301.jpg" data-width="1366" data-height="768" class="q-box-item"><span class="q-box-info">     <span class="wh">1366x768<span> </span>     </span></span><div class="q-box-image"><a href="javscript:void(0);"><img src="http://wayixia.com/uploads/image/1372211389301.jpg" class="image" style="margin-top: 43.7774524158126px; width: 200px; height: 112.445095168375px;"></a></div><div class="select-mask"></div></div>
 <div data-url="http://wayixia.com/uploads/image/64e05114-553c-4b34-97b5-a7f1082e1698.jpg" data-width="1920" data-height="1200" class="q-box-item"><span class="q-box-info">     <span class="wh">1920x1200<span> </span>     </span></span><div class="q-box-image"><a href="javscript:void(0);"><img src="http://wayixia.com/uploads/image/64e05114-553c-4b34-97b5-a7f1082e1698.jpg" class="image" style="margin-top: 37.5px; width: 200px; height: 125px;"></a></div><div class="select-mask"></div></div></div>

</div>
<br>
<br>
<div class="btn-group">
  <button id="size_1" class="btn btn-primary">1</button>
  <button id="size_2" class="btn btn-default">2</button>
  <button id="size_3" class="btn btn-default">3</button>
  <button id="size_5" class="btn btn-default">5</button>
</div>
<br>
<div id="box-container">
<div class="q-images-box">
  <div id="wayixia-list-2" style="visibility: visible;">
</div>

<br/>
<br/>
<br/>
<br/>
<br/>
</body>
</html>




